<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" :labelWidth="110"></TopFilter>

    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :selectionType="'single'"
      :datakey="'records'"
      :defaultSelections="defaultList"
      :onRowSelectChange="selectChangeHandle"
      :onSyncTableData="SyncTableData"
      :onColumnsChange="columns => (this.columns = columns)"
    >
    </FilterTable>
    <div style="height:47px;"></div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer(1)">取 消</el-button>
      <!-- <el-button @click="closeDrawer(2)" type="primary" :disabled="isOpen">确 定</el-button> -->
      <multiuse-button type="primary" :click="closeDrawer.bind(this, 2)" :disabled="isOpen">确 定</multiuse-button>
    </div>
  </div>
</template>
<script>
import { getCarList, vehicleConfiguration } from '@/api/dealerSale/OrderManagement/OrderSubmission/index.js';
export default {
  data() {
    this.table = null;
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchParams: {
        dealerCode: this.carData.dealerCode
      },
      fetchApi: getCarList,
      selectList: [],
      isOpen: false,
      defaultList: [],
      tableList: []
    };
  },
  props: ['carData'],
  mounted() {
    this.table = this.$refs.table.$refs.pageTable;
  },
  created() {
    this.getvehicleList();
  },
  methods: {
    createdFrom() {
      return [
        {
          type: 'INPUT_CASCADER',
          label: '车型选择',
          fieldName: 'brandProductList',
          placeholder: '请选择',
          options: { titles: ['品牌', '车系', '车型', '配置', '选装', '颜色'] },
          itemList: []
        },
        {
          type: 'INPUT',
          label: '产品代码',
          fieldName: 'productCode',
          placeholder: '请输入'
        },
        {
          type: 'INPUT',
          label: '产品名称',
          fieldName: 'productName',
          placeholder: '请输入'
        }
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '数量',
          dataIndex: 'orderNum',
          sorter: true,
          filter: true,
          filterType: 'input',
          editable: true,
          editType: 'number',
          defaultEditable: true,
          onInput: (val, data) => {
            this.changeNum(data);
          }
        },
        {
          title: '产品代码',
          dataIndex: 'productCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '产品名称',
          dataIndex: 'productName',
          align: 'center',
          width: 400,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型名称',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配置名称',
          dataIndex: 'packageName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '选装名称',
          dataIndex: 'optionName',
          align: 'center',
          width: 250,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '内饰',
          dataIndex: 'trimName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '外饰',
          dataIndex: 'colorName',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    // 获取车型车系
    async getvehicleList() {
      let res = await vehicleConfiguration(0, { isUnlimited: 10041001 });
      this.topFilterList.find(item => item.fieldName === 'brandProductList').itemList = res.data;
    },
    changeHandle(val) {
      this.isOpen = true;
      this.fetchParams = Object.assign({}, this.fetchParams, val);
    },
    SyncTableData(list) {
      if (list.length > 0) {
        this.tableList = list;
      } else {
        this.tableList = [];
      }
    },
    changeNum(val) {
      if (val.orderNum) {
        // 输入内容默认选中 不让其他数据可输入
        this.defaultList = [val];

        if (this.tableList.length > 0) {
          let arr = [];
          this.tableList.map(x => {
            if (x._uid != val._uid) {
              arr.push(x);
            }
          });
          console.log(arr);
          this.table.SET_CELL_DISABLED(arr, 'orderNum', true);
        }
      } else {
        this.defaultList = [];
        this.table.SET_CELL_DISABLED(this.tableList, 'orderNum', false);
      }
    },
    closeDrawer(type) {
      if (type == 1) {
        this.$emit('close');
      } else {
        let json = this.selectList[0];
        let Rep = /^[1-9]\d*$/;
        if (json.orderNum > 10000000000) {
          this.$notify({
            title: '警告',
            message: '输入数量过大',
            type: 'warning'
          });
          return;
        }
        if (Rep.test(json.orderNum)) {
          this.isOpen = true;
          this.$emit('close', json, this.carData);
        } else {
          this.$notify({
            title: '警告',
            message: '请输入正整数',
            type: 'warning'
          });
          return;
        }
      }
    },
    selectChangeHandle(val) {
      if (val.length > 0) {
        this.selectList = val;
        this.isOpen = false;
      } else {
        this.selectList = val;
        this.isOpen = true;
      }
    }
  }
};
</script>
